<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 计算属性</title>
</head>
<body>
  <div id="app">
    <p>{{ msg }}</p>
    <!-- 翻转字符串 -->
    <p>{{ msg.split('').reverse().join('') }}</p>
    <h3>使用 computed 属性来实现翻转功能</h3>
    <p>用计算属性实现: "{{ reverseString }}"</p>
    <h3>使用 computed 属性来实现一个简单的购物车计算功能</h3>
    <label for="">商品单价:</label>
    <input v-model="price" type="text" name="" id="">
    <label for="">购买数量:</label>
    <input v-model="num" type="text">
    <br />
    总价为: <span v-text="totalPrice"></span>
    <div style="height: 10px;background-color: #f60;"></div>
    <h3>计算属性的特点</h3>
    改变变量a的值: <button type="button" @click="autoAdd">让a++</button>
    <span>这是自定方法中的函数实现的: {{ result1() }}</span>
    <p>这还是使用计算属性的函数实现的： {{ result2 }}</p>
    <input type="text" v-model="result2">
  </div>
</body>
<script src="./src/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js',
      price: 0,
      num: 0,
      a: 0,
      num1: 100,
      num2: 10
    },
    methods: {
      autoAdd(){
        this.a++;
      },
      result1(){
        console.log('这是一个普通的函数实现了2个数的相加');
        return this.num1 + this.num2 + this.a;
      }
    },
    // 1.Vue中使用 computed属性来实现计算
    computed: {
      reverseString(){
        return this.msg.split('').reverse().join('');
      },
      totalPrice(){
        return this.price * this.num;
      },
      // result2(){
      //   console.log('这是计算属性的方法');
      //   return this.num1 + this.num2 + this.a;

      // }
      result2: {
        get(){
          // 返回最后结果
          return this.num1 + this.num2 + this.a;
        },
        set(newVal){
          // 只有当计算属性的值发生变化是才会触发 set 方法
          console.log(newVal);
          this.num1 += parseInt(newVal);
        }
      }
    }
  })
</script>
</html>